<template>
    <div class="pa">
        <span class="label" for="email">{{data.label}}</span>
        <div class="inputDiv">
            <input @blur='blurFn(data.valName,data.val)' v-model="data.val" :class="{'input': true, 'is-danger': data.errors.has(data.valName) }" name="email" type="text" placeholder="Email">
            <div v-show="data.errors.has(data.valName)" class="arrow"></div>
            <div v-show="data.errors.has(data.valName)" class="help is-danger">{{ data.errors.first(data.valName) }}</div>
        </div>
    </div>
</template>

<script>
export default {
    props:{
        data:{
            type:Object,
            default () {
                return {
                    label:'',
                    placeholder:'',
                    errors:null,
                    valName:'',
                    val:''
                }
            }
        }
    },
    methods:{
        blurFn (str, val) {
            this.$emit('blurFn')
        }
    }
}
</script>

<style>

</style>
